<template>
    <form class="layui-form" action="" :lay-filter="name+'filter'">
            <div class="layui-form-item kgo-form-alone-item">
                    <div class="layui-input-inline kgo-input-alone-inline">
                        <select :name="name" lay-verify="required" lay-search="" :lay-filter="name">
                            <option value="">直接选择或搜索选择</option>
                            <option v-for="option in options" :value="option.sysCode">{{option.sysValue}}</option>
                        </select>
                    </div>
            </div>
    </form>


</template>

<script>

export default {
    props:{
      name:{
          default:"name"
      },
      value:{
          default:"text"
      },
      catalogueCode:{
          default:null
      },
      selected:{
         default:null
      },
      url:{
         default:null
      }

    },
     data () {
        return {
           options:[],
           selectedData:""
        }
    },
    created(){
        this.getSysCode();
    },
    mounted(){
        var that = this;
        layui.form.on('select('+this.name+')', function(data){
           that.selectedData = data.value;
           that.setValue(data.value);
        });
        
   },
    methods:{
      setValue:function(value){
          var _name = this.name;
          var selected = {};
          selected[_name] = value;
          this.$store.commit('updateSelected',selected);
          this.$emit('selected',this.name+":"+value)//将值绑定到transfer上传递过去
      },
       getSelected:function(){
         return this.selectedData;
      },
      getSysCode:function(){
          var $ = layui.$;
          var _catalogueCode = this.catalogueCode;
          var codeUrl =null;
          if(this.url==null){
            codeUrl =  this.$store.state.RootURL + "/sys/code";
          }else{
            codeUrl =  this.$store.state.RootURL + this.url;
          }

          var that = this;
          $.ajax({
            url: codeUrl,
            type:"get",
            async: true,
            dataType:'json',
            data: {"catalogueCode":_catalogueCode},
            success: function(data){
               that.options=data.data;
               //延迟执行更新，解决vue渲染dom和layui更新表单之间的时间差
               setTimeout(function(){
                if(that.selected!=null){
                    $('select[name='+that.name+']').val(that.selected);
                }
                 layui.form.render('select');
               },50);
              
            }
        });

      }

    }
}
</script>

<style lang="scss">
.kgo-form-alone-item{
    margin-bottom: 0px;
}
.kgo-input-alone-inline{
    width: 95% !important;
}
</style>
